import {
  ArrowDownOutlined,
  ArrowUpOutlined,
  CreditCardOutlined,
} from '@ant-design/icons';
import { Card, Col, Row, Statistic } from 'antd';
import { useEffect, useState } from 'react';
import { useCustomerState } from '../../stores/CustomerStore';

function CustomerHome() {
  const { customer } = useCustomerState();
  const customerID = customer?.customerID;
  const [cardCount, setCardCount] = useState<number>(0);
  const [totalAsset, setTotalAsset] = useState<number>(0);
  const [monthlyIncome, setMonthlyIncome] = useState<number>(0);
  const [monthlyExpense, setMonthlyExpense] = useState<number>(0);

  useEffect(() => {
    if (!customerID) return;
    fetch(
      `http://localhost:8000/statistics/by-customer/${customerID}/card-count`,
    )
      .then((res) => res.json())
      .then((data) => setCardCount(data.card_count || 0));
    fetch(
      `http://localhost:8000/statistics/by-customer/${customerID}/total-asset`,
    )
      .then((res) => res.json())
      .then((data) => setTotalAsset(data.total_asset || 0));
    fetch(
      `http://localhost:8000/statistics/by-customer/${customerID}/monthly-income`,
    )
      .then((res) => res.json())
      .then((data) => setMonthlyIncome(data.monthly_income || 0));
    fetch(
      `http://localhost:8000/statistics/by-customer/${customerID}/monthly-expense`,
    )
      .then((res) => res.json())
      .then((data) => setMonthlyExpense(data.monthly_expense || 0));
  }, [customerID]);

  return (
    <div style={{ padding: '20px' }}>
      <Row gutter={16}>
        <Col span={8}>
          <Card>
            <Statistic
              title="银行卡总数"
              value={cardCount}
              prefix={<CreditCardOutlined />}
            />
          </Card>
        </Col>
        <Col span={8}>
          <Card>
            <Statistic title="资产总额 (元)" value={totalAsset} precision={2} />
          </Card>
        </Col>
      </Row>
      <Row gutter={16} style={{ marginTop: '20px' }}>
        <Col span={8}>
          <Card>
            <Statistic
              title="本月收入"
              value={monthlyIncome}
              precision={2}
              valueStyle={{ color: '#3f8600' }}
              prefix={<ArrowUpOutlined />}
              suffix="元"
            />
          </Card>
        </Col>
        <Col span={8}>
          <Card>
            <Statistic
              title="本月支出"
              value={monthlyExpense}
              precision={2}
              valueStyle={{ color: '#cf1322' }}
              prefix={<ArrowDownOutlined />}
              suffix="元"
            />
          </Card>
        </Col>
      </Row>
    </div>
  );
}

export default CustomerHome;
